<template>
    <div class="show_container">
        <Header></Header>
        <div class="whole_container">
            <!-- 这里是视频详情页左侧边栏 -->
        <div class="left_container">
            <!-- 这里是视频的头部信息 -->
            <div id="viewbox_headline">
                <div class="video_info_title">
                    <h1 :title="video.title" class="videoTitle">{{ video.title }}</h1>
                </div>
                <div class="video_info_mata">
                    <div class="Totalview">
                        <svg class="view-icon" style="width:20px;height:20px;" data-v-aed3e268="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" width="20" height="20"><path d="M10 4.040041666666666C7.897383333333334 4.040041666666666 6.061606666666667 4.147 4.765636666666667 4.252088333333334C3.806826666666667 4.32984 3.061106666666667 5.0637316666666665 2.9755000000000003 6.015921666666667C2.8803183333333333 7.074671666666667 2.791666666666667 8.471183333333332 2.791666666666667 9.998333333333333C2.791666666666667 11.525566666666668 2.8803183333333333 12.922083333333333 2.9755000000000003 13.9808C3.061106666666667 14.932983333333334 3.806826666666667 15.666916666666667 4.765636666666667 15.744683333333336C6.061611666666668 15.849716666666666 7.897383333333334 15.956666666666667 10 15.956666666666667C12.10285 15.956666666666667 13.93871666666667 15.849716666666666 15.234766666666667 15.74461666666667C16.193416666666668 15.66685 16.939000000000004 14.933216666666667 17.024583333333336 13.981216666666668C17.11975 12.922916666666667 17.208333333333332 11.526666666666666 17.208333333333332 9.998333333333333C17.208333333333332 8.470083333333333 17.11975 7.073818333333334 17.024583333333336 6.015513333333334C16.939000000000004 5.063538333333333 16.193416666666668 4.329865000000001 15.234766666666667 4.252118333333334C13.93871666666667 4.147016666666667 12.10285 4.040041666666666 10 4.040041666666666zM4.684808333333334 3.255365C6.001155 3.14862 7.864583333333334 3.0400416666666668 10 3.0400416666666668C12.13565 3.0400416666666668 13.999199999999998 3.148636666666667 15.315566666666667 3.2553900000000002C16.753416666666666 3.3720016666666672 17.890833333333333 4.483195 18.020583333333335 5.925965000000001C18.11766666666667 7.005906666666667 18.208333333333336 8.433 18.208333333333336 9.998333333333333C18.208333333333336 11.56375 18.11766666666667 12.990833333333335 18.020583333333335 14.0708C17.890833333333333 15.513533333333331 16.753416666666666 16.624733333333335 15.315566666666667 16.74138333333333C13.999199999999998 16.848116666666666 12.13565 16.95666666666667 10 16.95666666666667C7.864583333333334 16.95666666666667 6.001155 16.848116666666666 4.684808333333334 16.7414C3.2467266666666665 16.624750000000002 2.1092383333333338 15.513266666666667 1.9795200000000002 14.070383333333334C1.8823900000000002 12.990000000000002 1.7916666666666667 11.562683333333334 1.7916666666666667 9.998333333333333C1.7916666666666667 8.434066666666666 1.8823900000000002 7.00672 1.9795200000000002 5.926381666666667C2.1092383333333338 4.483463333333334 3.2467266666666665 3.371976666666667 4.684808333333334 3.255365z" fill="currentColor"></path><path d="M12.23275 9.1962C12.851516666666667 9.553483333333332 12.851516666666667 10.44665 12.232683333333332 10.803866666666666L9.57975 12.335600000000001C8.960983333333335 12.692816666666667 8.1875 12.246250000000002 8.187503333333334 11.531733333333333L8.187503333333334 8.4684C8.187503333333334 7.753871666666667 8.960983333333335 7.307296666666667 9.57975 7.66456L12.23275 9.1962z" fill="currentColor"></path></svg>

                    </div>
                    <div class="view_text">
                        {{ video.view_text }}
                    </div>
                    <div class="up_date">
                        <div class="up_date_detail">
                            {{ video.up_date_text }}
                        </div>
                    </div>

                </div>
            </div>
            <!-- 这里是视频的播放容器 -->
            <div id="player_wrapper">
                <div id="video_player">
                    <div class="video_player_container">
                        <div class="player_area">
                            <div class="video_wrapper">
                                <!-- 视频的传输之后再处理 -->
                                <video preload="auto" crossorigin="anonymous" :src="video.src" controls></video>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 这里是视频的工具栏，如点赞，分享，收藏 -->
            <div id="toolbar_report">
                <div class="video_toolbar_left">
                    <div class="toolbar_left_item_wrap" :class="{on:isGetLike}" @click="btnLikeClickHandle">
                        <div class="video_like">
                            <svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" class="video-like-icon video-toolbar-item-icon" ><path fill-rule="evenodd" clip-rule="evenodd" d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z" fill="currentColor"></path></svg>
                            <span class="video_like_info">{{ video.like }}</span>
                        </div>
                    </div>
                    <div class="toolbar_left_item_wrap" :class="{on:isGetFav}" @click="btnFavClickHandle">
                        <div class="video_fav">
                            <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="video-fav-icon video-toolbar-item-icon" data-v-b42ec39c=""><path fill-rule="evenodd" clip-rule="evenodd" d="M19.8071 9.26152C18.7438 9.09915 17.7624 8.36846 17.3534 7.39421L15.4723 3.4972C14.8998 2.1982 13.1004 2.1982 12.4461 3.4972L10.6468 7.39421C10.1561 8.36846 9.25639 9.09915 8.19315 9.26152L3.94016 9.91102C2.63155 10.0734 2.05904 11.6972 3.04049 12.6714L6.23023 15.9189C6.96632 16.6496 7.29348 17.705 7.1299 18.7605L6.39381 23.307C6.14844 24.6872 7.62063 25.6614 8.84745 25.0119L12.4461 23.0634C13.4276 22.4951 14.6544 22.4951 15.6359 23.0634L19.2345 25.0119C20.4614 25.6614 21.8518 24.6872 21.6882 23.307L20.8703 18.7605C20.7051 17.705 21.0339 16.6496 21.77 15.9189L24.9597 12.6714C25.9412 11.6972 25.3687 10.0734 24.06 9.91102L19.8071 9.26152Z" fill="currentColor"></path></svg>
                            <span class="video_fav_info">{{ video.fav }}</span>
                        </div>
                    </div>
                    <div class="toolbar_left_item_wrap" :class="{on:isGetShare}" @click="btnShareClickHandle">
                        <div class="video_share">
                            <svg data-v-492c8232="" width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="video-share-icon video-toolbar-item-icon"><path d="M12.6058 10.3326V5.44359C12.6058 4.64632 13.2718 4 14.0934 4C14.4423 4 14.78 4.11895 15.0476 4.33606L25.3847 12.7221C26.112 13.3121 26.2087 14.3626 25.6007 15.0684C25.5352 15.1443 25.463 15.2144 25.3847 15.2779L15.0476 23.6639C14.4173 24.1753 13.4791 24.094 12.9521 23.4823C12.7283 23.2226 12.6058 22.8949 12.6058 22.5564V18.053C7.59502 18.053 5.37116 19.9116 2.57197 23.5251C2.47607 23.6489 2.00031 23.7769 2.00031 23.2122C2.00031 16.2165 3.90102 10.3326 12.6058 10.3326Z" fill="currentColor"></path></svg>
                            <span class="video_share_info">{{ video.share }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="video_desc" class="desc_container">
                <div class="video_desc_info">
                    <span class="video_desc_text">{{ video.desc_text }}</span>
                </div>
            </div>
            <div class="video_tag_container">
                <div class="video_tag_panel">
            <!-- 这里放视频的标签组件 -->
                    <videotag></videotag>
                </div>
            </div>
            <div id="comment_app">
                <!-- 这里面放评论组件 -->

            </div>
        </div>
        <div class="right_container">
            <div class="right_container_inner">
                <div class="up_panel_container">
                    <div class="up_info_container">
                        <div class="up_info_left">
                            <div class="up_avater_wrapper">
                                <a href="">
                                    <avater></avater>
                                </a>
                            </div>
                        </div>
                        <div class="up_info_right">
                            <div class="up_info_detail">
                                <div class="up_info_detail_top">
                                    <a href="" class="up_name">
                                        <span class="">{{ video.up.name }}</span>
                                    </a>
                                </div>
                                <div class="up_desc">
                                    <span>{{ video.up.desc }}</span>
                                </div>
                            </div>
                            <div class="info_btn_btm">
                                <div class="follow_btn" @click="">
                                    <span>
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="follow-btn-icon" data-v-fdf052ec=""><path fill-rule="evenodd" clip-rule="evenodd" d="M7.25098 8.75V13.25C7.25098 13.6642 7.58676 14 8.00098 14C8.41519 14 8.75098 13.6642 8.75098 13.25V8.75H13.251C13.6652 8.75 14.001 8.41421 14.001 8C14.001 7.58579 13.6652 7.25 13.251 7.25H8.75098V2.75C8.75098 2.33579 8.41519 2 8.00098 2C7.58676 2 7.25098 2.33579 7.25098 2.75V7.25H2.75098C2.33676 7.25 2.00098 7.58579 2.00098 8C2.00098 8.41421 2.33676 8.75 2.75098 8.75H7.25098Z" fill="currentColor"></path></svg>
                                        关注
                                    </span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="recommend_list">
                    <div class="rec_list">
                        <span>推荐列表</span>
                        <videoCardSmall  
                        v-for="(video,index) in videos"
                        :key="video.vid"  
                        :index="index"
                        :video="video">
                        </videoCardSmall>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import Avater from '@/components/avater.vue';
import VideoCardSmall from '@/components/videoCardSmall.vue';
import api from "../api/index"
import Header from '@/components/header.vue';
export default{
    data(){
        return{
            isGetLike:false,
            isGetFav:false,
            isGetShare:false,
            video:{
                src:"",
                title:"这是一个视频",
                view_text:"100万",
                up_date_text:"2024-11-6 17:01:20",
                like:"1488",
                fav:"678",
                share:"79",
                desc_text:"我是视频简介，啦啦啦啦啦啦啦啦啦啦啦啦啦",
                up:{
                    name:"peind",
                    desc:"大家都是byd,我让你飞起来"
                }
            },
            videos:[{
                src:"",
                title:"这是一个视频",
                view_text:"100万",
                up_date_text:"2024-11-6 17:01:20",
                like:"1488",
                fav:"678",
                share:"79",
                desc_text:"我是视频简介，啦啦啦啦啦啦啦啦啦啦啦啦啦",
                up:{
                    name:"peind",
                    desc:"大家都是byd,我让你飞起来"
                }
            }]
        }
    },
    components:{
        Avater,
        VideoCardSmall,
        Header
    },
    created(){
        this.fetchVideo();
    },
    methods:{
        async fetchVideo(){
            const vid = this.$route.params.vid;
            try{
                // 方法一:
                // const response = await api.GetVideo(vid);
                // this.video.src = response.data.videoUrl;
                // console.log(response);
                // 方法二:
                const response = await api.GetVideoByBlob(vid);
                const videoBlob = response.data;
                const videoUrl = URL.createObjectURL(videoBlob);
                // 方法三:
                // this.video.src = `http://localhost:8888/video/stream/${vid}`;
                this.video.src = videoUrl;
                // this.videoSrc = `/video/stream/${vid}`;
            }catch(error){
                console.error("Error fetch video",error);
            }
        },
    btnLikeClickHandle(){
        // 这里放前端与后端关于点赞的交互
        try{

        }
        catch{

        }
        this.isGetLike = !this.isGetLike;
        // 
    },
    btnFavClickHandle(){
        try{
            // axios的发送
}
catch{
    // 关于异常的处理

}
        this.isGetFav = !this.isGetFav;
    },

    /**分享按钮的事件处理 */ 
    btnShareClickHandle(){
        try{

}
catch{

}
        this.isGetShare = !this.isGetShare;
    }

}
}
</script>
<style scoped>
*{
    font-size: 15px;
    font-weight: 500;
}
a{
    text-decoration: none;
    list-style: none;
}
.whole_container{
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    margin: 0 auto;
    padding: 0 30px;
    gap: 20px;
}
.left_container{
    height: fit-content;
}
.video_info_title{
    display: flex;
}
.video_info_title h1{
    font-size: 22px;
}
.video_info_mata{
    display: flex;
    gap: 10px;
    color: #9499A0;
    margin: 0px 0px 10px 10px;
}
.video_info_mata .up_date{
    margin-left: 50px;

}
#player_wrapper{
    width: 810px;
    height: 540px;
    background: #0f0f0f;
}
#video_player{
    width: 100%;
    height: 100%;
}
.video_player_container{
    width: 100%;
    height: 100%;
}
.player_area{
    width: 100%;
    height: 100%;
}
.video_wrapper{
    width: 100%;
    height: 100%;
}
video{
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#toolbar_report{
    display: flex;
    border-bottom: 1px solid #E3E5E7;
    margin: 10px 0px;
    padding: 0px 0px 10px 0px;
    left: 0;
}
.video_toolbar_left{
    display: flex;
    justify-items: center;
    align-items: center;
    
}
.toolbar_left_item_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 50px 0px 0px;
    cursor: pointer;
    color: #61666D;
}
.toolbar_left_item_wrap.on{
    color: #00AEEC;
}
.toolbar_left_item_wrap:hover> div >span{
    color: #00AEEC;
}
.toolbar_left_item_wrap:hover > div > svg{
    color: #00AEEC;
}
.toolbar_left_item_wrap div:nth-of-type(1){
    display: flex;
    justify-content: center;
    align-items: center;
    gap:20px;
}
.Get{
    color: #00AEEC;
}
.toolbar_left_item_wrap span{
    font-weight: 500;
    font-size: 15px;
    transition: all .3s;
}
.toolbar_left_item_wrap svg{
    width: 28px;
    height: 28px;
    transition: all .3s;
    cursor: pointer;
}
#video_desc{
    margin: 20px 0px 0px 5px;
}
.video_tag_container{
    border-bottom:1px solid #E3E5E7 ;
}
.right_container{
    margin: 10px 20px;
}
.up_panel_container{
    pointer-events: all;
}
.up_info_container{
    display: flex;
    align-items: center;
    justify-content: center;
}

.up_info_detail span{
    color: lightpink;
    font-size: 20px;
    font-weight: 600;
}
.up_info_right .up_info_detail .up_desc span{
    color: #9499A0;
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.info_btn_btm{
    margin: 10px 0px;
    width: 100%;
    height: 100%;
    background: #00AEEC;
    color: #eff3f7;
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
}
.follow_btn span{
    display: flex;
    align-items: center;
    justify-content: center;
}
.recommend_list{
    width: 300px;
}
.rec_list{
    border-bottom: 1px solid #E3E5E7;
    display: flex;
    flex-direction: column;
}
.rec_list span{
    border-bottom: 1px solid #E3E5E7;
}
.rec_list span{
    font-size: 20px;
    color: #7d7d7e;
    padding: 10px 0px;
}
</style>